<template>
  <div class="last-order-tip-cpt">
    <section class="tip_visitors" id="tip_vi">
        <img :src="resData.headimgurl"/>
        <p>
            <i>{{msgTitle}}</i>
            <span class="textFlow">{{resData.nickname}}</span>
              {{msgCnt}}
            <i>，{{resData.time}}之前</i>
        </p>
    </section>
  </div>
</template>

<script>
/**
 * 最近下单提示 cpt
 * @author gaogm
 */
import Vue from 'vue'
import { reqPostCommonLastOrderInfo } from '@/api/public/index'
export default Vue.extend({
  name: 'last-order-tip-cpt',
  props: {},
  computed: {
    msgTitle() {
      let val = ''
      switch (this.resData.type) {
        case '1':
        case 1:
          val = '最新订单来自'
          break
        case '2':
        case 2:
          val = '最新评价来自'
          break
      }
      return val
    },
    msgCnt() {
      let val = ''
      if (this.resData.alias && (this.resData.type == 3 || this.resData.type == 4 || this.resData.type == 5)) {
        val = '成为 ' + this.resData.alias
      }
      return val
    }
  },
  data() {
    return {
      resData: {},
      mTime: ''
    }
  },
  mounted() {
    this.mTime = setInterval(() => {
      this.fetchOrderInfo()
    }, 10000)
  },
  methods: {
    fetchOrderInfo() {
      let groupId = ''
      const eleGroupShopId = document.getElementsByName('groupShoppingId')[0]
      // console.log(eleGroupShopId)
      if (eleGroupShopId) {
        groupId = eleGroupShopId.value
        // console.log('groupId' + groupId)
      }
      reqPostCommonLastOrderInfo({
        'groupId': groupId
      }).then(res => {
        const data = res
        // // console.log(data)
        if (res.status == 1) {
          this.resData = data
          const obj = '#tip_vi'
          document.querySelector(obj).style.animation = 'show 1s 1'
          setTimeout(() => {
            document.querySelector(obj).style.opacity = 1
            document.querySelector(obj).style.top = '10%'
          }, 1000)
          setTimeout(() => {
            document.querySelector(obj).style.animation = 'hide 1s 1'
          }, 3000)
          setTimeout(() => {
            document.querySelector(obj).style.opacity = 0
            document.querySelector(obj).style.top = 0
          }, 4000)
          // $(obj).show().stop(true, true).animate({
          //   'filter': 'alpha(opacity=100)',
          //   '-moz-opacity': '1',
          //   '-khtml-opacity': '1',
          //   'opacity': '1',
          //   'top': '10%'
          // }, 1000, function() {
          //   setTimeout(function() {
          //     $(obj).animate({
          //       'filter': 'alpha(opacity=0)',
          //       '-moz-opacity': '0',
          //       '-khtml-opacity': '0',
          //       'opacity': '0',
          //       'top': '0'
          //     }, function() {
          //       $(obj).hide()
          //     })
          //   }, 2000)
          // })
        } else {
          this.mTime && clearInterval(this.mTime)
        }
      }).catch(_ => {
        this.mTime && clearInterval(this.mTime)
      })
    }
  }
})
</script>

<style lang="scss">
.last-order-tip-cpt {
  .tip_visitors {
    position: fixed;
    left: 8%;
    top: -72px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 36px;
    color: #fff;
    height: 72px;
    overflow: hidden;
    opacity: 0;
    -moz-opacity: 0;
    -khtml-opacity: 0;
    -webkit-opacity: 0;
    filter: alpha(opacity=0);
    z-index: 9999;
    img {
      float: left;
      border-radius: 50%;
      width: 72px;
      height: 72px;
      overflow: hidden;
    }
    p {
      float: left;
      line-height: 72px;
      padding: 0 20px;
      .textFlow {
        display: inline-block;
        vertical-align: middle;
        max-width: 208px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      i {
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
  @keyframes show {
    from {
      opacity: 0;
      top: -72px;
    }
    to {
      opacity: 1;
      top: 10%;
    }
  }
  @keyframes hide {
    from {
      opacity: 1;
      top: 10%;
    }
    to {
      opacity: 0;
      top: 0;
    }
  }
}
</style>
